<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>&lt;input type="url"&gt; example</title>
    <style>
      div {
        margin-bottom: 10px;
        position: relative;
        }

        input[type="number"] {
          width: 100px;
        }

        input + span {
          padding-right: 30px;
        }

        input:invalid+span:after {
          position: absolute; content: '✖';
          padding-left: 5px;
        }

        input:valid+span:after {
          position: absolute;
          content: '✓';
          padding-left: 5px;
        }
    </style>
   </head>
  <body>
    <form>
      <div>
        <label for="myURL">Enter the problem website address:</label>
        <input id="myURL" name="myURL" type="url"
               required pattern=".*\.myco\..*"
               title="URL should be in a myco domain">
        <span class="validity"></span>
      </div>
      <div>
        <label for="myComment">What is the problem?</label>
        <input id="myComment" name="myComment" type="text"
               required>
        <span class="validity"></span>
      </div>
      <div>
        <button>Submit</button>
      </div>
    </form>
    <script>

    </script>
</body>
  </html>
